<template>
  <div>
    <div class="income_header">
      <div>
        <van-grid center clickable :column-num="2" >
          <van-grid-item>
            <van-cell center :title="directCount" label="直推会员(人)">
            </van-cell>
          </van-grid-item>
          <van-grid-item icon="photo-o">
            <van-cell center :title="indirectCount" label="直推会员(人)"/>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div class="income_middle_award">
      <div style="margin-top: 20px;">邀请好友购物拿奖励！</div>
      <div>您当前的会员等级是普通会员，邀请好友购买体验商品，享受购物奖励。每位好友仅限一次。</div>
    </div>
    <div style="text-align: center;">
      <van-button class="promote_button copy_button" data-clipboard-text="需要渲染的内容" :round="true" @click="copyLink()" type="primary">复制邀请链接</van-button>
      <van-button class="promote_button" @click="showExtension" :round="true" type="primary">生成邀请海报</van-button>
    </div>
    <van-popup v-model:show="show">
    <div id="app">
        <img :src="src" alt="" class="share-image" :crossOrigin="crossOrigin"/>
        <vue-canvas-poster class="poster" :widthPixels="1000" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>
      </div>
    </van-popup>
    <div style="display:none">
        <img :src="avatar" class="avatar-image" >
    </div>
  </div>
</template>

<script>
  import {Col, Grid, GridItem, Popup, Row} from 'vant';
  import bg_default from "@/assets/images/user_head_bg.png";
  import {getLocalStorage} from "@/utils/local-storage";
  import {drawPoster} from './painter';
  import {userPromote} from "../../../api/api";


  export default {
  name: 'user-promote',
  data() {
    return {
      crossOrigin: 'anonymous',
      src: '',
      show:false,
      painting: {},
      background_image: bg_default,
      avatar:'',
      userId:'',
      nickname:'',
      directCount:0,
      totalCount:0,
      indirectCount:0,
    };
  },
  created() {
    this.getPromote();
  },
  methods: {
    // 保存
    success(src) {
      if(this.userId <= 0){
        that.$toast({
          message: "生成邀请海报失败！",
          duration: 1500,
        });
        return false
      }
      this.src = src
    },
    fail(err) {
      console.log('fail', err)
    },
    showExtension(){
      const params = {
        type: 'pro', // 尝试换一下text,image
        userId:this.userId,
        avatar:this.avatar,
        nickname:this.nickname,

      }
      drawPoster(params).then(res => {
        this.painting = res
      })
      this.show=true;
    },
    getPromote() {
      userPromote().then(res => {
        this.avatar=res.data.data.avatar;
        this.userId=res.data.data.userId;
        this.nickname=res.data.data.nickname;
        this.directCount=res.data.data.directCount;
        this.totalCount=res.data.data.totalCount;
        this.indirectCount=res.data.data.indirectCount;
      });
    },
    copyLink(){
      if(this.userId <= 0){
        that.$toast({
          message: "复制异常！",
          duration: 1500,
        });
        return
      }

      this.link=window.location.host + "?pid=" + this.userId
      let that = this;
      this.$copyText(this.link).then(
          function (e) {
            that.$toast({
              message: "链接复制成功",
              duration: 1500,
            });
          },
          function (e) {
            that.$toast({
              title: "链接复制失败",
              duration: 1500,
            });
          }
      );
    }
  },
  components: {
    drawPoster,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Row.name]: Row,
    [Col.name]: Col,
    [Popup.name]: Popup,
  }
};
</script>

<style lang="scss" scoped>
.income_header {
  background-repeat: no-repeat;
  background-size: cover;
  height: 130px;
  text-align: center;
  color: #fff;
  padding-top: 30px;
  z-index:9999
}
.income_middle_award{
  width: 63%;
  text-align: center;
  margin: auto;
}
.promote_button{
  margin-right: 26px;
  width: 150px;
  height: 35px;
  margin-top: 20px;
}
.header {
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
}
.share-image {
  width: 100%;
  height: auto;
}
.van-grid{
  text-align: center;
  font-weight: 700;
}
</style>
